.flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}

.one-character{
  width:1.5rem;
  height:1.6rem;
  text-align:center;
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin-bottom: 0.3rem;
}

@-webkit-keyframes progress-current {
  from {
    border-bottom: 2px solid #6CC3D5;
  }
  50% {
    border-bottom: 2px solid transparent;
  }
  to {
      border-bottom: 2px solid #6CC3D5;
    }

}

@keyframes progress-current {
  from {
    border-bottom: 2px solid #6CC3D5;
  }
  50% {
    border-bottom: 2px solid transparent;
  }
  to {
      border-bottom: 2px solid #6CC3D5;
    }
}

.current-chatacter{
  background-color: transparent;
  background-image: none;
  /*
   border-radius: 0.4rem;
   border: 1px solid #6CC3D5;*/

  -webkit-animation: progress-current 1s linear infinite;
  nimation: progress-current 1s linear infinite;
}

.keyboard-container{

}

.keyboard:hover{
  background-color: #5eb69d;
  cursor: pointer;
}

.key-line{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
}

.key-button {
  flex:2 1 4rem;
  margin:0.1rem;

  /*width: 3rem;
  height: 3rem;
  */
}

.key-space {
  flex:1 1 2rem;
  margin:0rem;
  opacity: 0;
}

.height-100{
  /*height: 100%;*/
}

.flex-center{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  overflow-y: auto;
}

html{
}
